<template>
	<div class="content">
		<h2><i class="iconfont icon-jinbi"></i>供应商列表</h2>
		<div class="content-wrap">
			<!--搜索分类-->
			<div class="search">
				<div class="search__list" style="display: none;">
					<div class="search__list--title search__list--title-tip">供应商状态</div>
					<el-select v-model="params.states" size="mini" >
						<el-option label="全部" :value="0"></el-option>
						<el-option label="正常" :value="1"></el-option>
						<el-option label="冻结" :value="2"></el-option>
					</el-select>
				</div>
				<div class="search__list">
					<div class="search__list--title">开通时间</div>
					<el-date-picker
						size="mini"
						@change="handleSelectTimes"
					    v-model="times"
					    type="daterange"
					    range-separator="至"
					    start-placeholder="开始日期"
					    end-placeholder="结束日期">
				  	</el-date-picker>
				</div>
				<div class="search__list">
					<div class="search__list--title">所属区域</div>
					<s-get-area @getArea="handleGetArea"></s-get-area>
				</div>
				<div class="search__list">
					<div class="search__list--title">供应商账号</div>
					<el-input placeholder="供应商账号" v-model="params.mobile" clearable size="mini"></el-input>
				</div>
				<div class="search__list">
					<el-button type="success" size="mini" @click="fetchSupplierList">搜索</el-button>
				</div>
				<div class="search__list">
					<el-button type="primary" size="mini" @click="addSupplier">
						添加供应商
					</el-button>
				</div>
			</div>
			<!--商品展示表格-->
			<div class="content-table" v-loading="loading" >
				<el-table :data="data" strip size="mini">
					<el-table-column label="供应商账号" prop="mobile" width="120"></el-table-column>
					<el-table-column label="供应商名称" prop="supplier_name"  width="150"></el-table-column>
					<el-table-column label="联系人" prop="bank_card.link_man"></el-table-column>
					<el-table-column label="联系电话" prop="bank_card.mobile" width="120"></el-table-column>
					<el-table-column label="所属地区" prop="warehouse.address" min-width="100"></el-table-column>
					<el-table-column label="详细地址" prop="address" width="150"></el-table-column>
					<el-table-column label="传真号码" prop="fax_no" width="120"></el-table-column>
					<el-table-column label="开通时间" prop="create_time" width="130">
						<template slot-scope="scope">
							<span >{{ scope.row.create_time | formatTime }}</span>
						</template>
					</el-table-column>
					<el-table-column label="供应商状态" align="center" width="150" v-if="false">
						<template slot-scope="scope" size="small">
							<el-tag v-if="Math.random() > .5" type="success">正常</el-tag>
							<el-tag v-else type="danger">冻结</el-tag>
						</template>
					</el-table-column>
					<el-table-column label="操作" align="center" min-width="200">
						<template slot-scope="scope" size="small">
							<el-button 
								v-if="Math.random() > .5"
								size="mini"
								type="danger"
								@click="frozeSupplier(scope.row.supplier_id)"
								style="display: none;">
								冻结
							</el-button>
							<el-button v-else 
								size="mini"
								type="success"
								@click="passSupplier(scope.row.supplier_id)"
								style="display: none;">
								开通
							</el-button>
							<el-button
								size="mini"
								@click="modifySupplier(scope.row.supplier_id)">
								修改
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<el-pagination 
				@current-change="handleCurrentChange"
				background 
				layout="total, prev, pager, next, jumper"
				:total="totalNum" 
				class="fr"
				>
			</el-pagination>
			<s-supplier-detail :id="supplier_id" @closeModel="showModel = false" :isShow="showModel"></s-supplier-detail>
		</div>
	</div>
</template>

<script>
	import supplierDetail from "./supplier_detail.vue"
	import getArea from "../../components/cascader/province_cascader.vue"
	export default {
		created() {
			this.fetchSupplierList();
		},
		components: {
			"s-supplier-detail": supplierDetail,
			"s-get-area": getArea
		},
		data() {
			return {
				params: {
					mobile: "",
					start_time: "",
					end_time: "",
					states: 0,
					area_id: "",
					page: 1,
					rows: 10
				},
				showModel: false,			//显示申请详情
				data: null,					//提现数据			
				times: "",					//申请日期
				loading: true,				//加载小圈圈
				supplier_id: null,			//供应商的id
				totalNum: 0					//返回数据总数，用于分页那里显示
			}
		},
		methods: {
			//翻页
			handleCurrentChange(pages) {
				this.params.page = pages;
				this.fetchSupplierList();
			},
			//选择时间时候触发
			handleSelectTimes(val) {
				if (this.times) {
					this.params.start_time = this.times[0].getTime();
					this.params.end_time = this.times[1].getTime();
				}else {
					this.params.start_time = "";
					this.params.end_time = "";
				}
			},
			//获取商家详情
			fetchSupplierList() {
				this.loading = true;
				var url = `${this.url}/supplier/supplier_get_list.action`;
				var params = this.params;
				this.$http.get(url,{ params }).then((res)=> {
					this.loading = false;
					this.totalNum = res.data.result.total;
					this.data = res.data.result.rows;
				});
			},
			//冻结供应商
			frozeSupplier(id) {
			},
			//解冻供应商
			passSupplier(id) {
			},
			showSupplierDetail(id) {
				this.showModel = true;
				this.supplier_id = id;
			},
			//添加供应商
			addSupplier() {
				this.$router.push("/admin/add_supplier");
			},
			//地区选择
			handleGetArea(val) {
				this.params.area_id = val;
			},
			//修改供应商
			modifySupplier(id) {
				this.$router.push({path: '/admin/add_supplier', query: { id } });
			},
			
		}
	}
</script>

<style scoped lang="scss">

</style>